import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { FileUpload } from '@zendeskgarden/react-forms';
import { FileUploadStory } from './stories/FileUploadStory';
import { FILE_TYPES } from '../stories/data';

<Meta title="Packages/Forms/[patterns]" component={FileUpload} />

# Patterns

## File upload

The `FileUpload` component is shown here working together with the
`react-dropzone` library.

<Canvas>
  <Story
    name="File upload"
    args={{
      accept: { 'image/jpeg': [], 'image/png': [], 'image/gif': [] },
      multiple: true,
      type: 'image'
    }}
    argTypes={{
      isDragging: { table: { disable: true } },
      accept: { table: { category: 'Dropzone' } },
      maxFiles: { control: 'number', table: { category: 'Dropzone' } },
      maxSize: { control: 'number', table: { category: 'Dropzone' } },
      minSize: { control: 'number', table: { category: 'Dropzone' } },
      multiple: { table: { category: 'Dropzone' } },
      type: {
        control: { type: 'select', options: FILE_TYPES },
        table: { category: 'File' }
      }
    }}
  >
    {args => <FileUploadStory {...args} />}
  </Story>
</Canvas>
